<template>
  <div class="shijianFenbu-box">
      <div id="shijianFenbu"></div>
  </div>
</template>

<script>
import { Chart } from '@antv/g2';
import $api from "@/axios/apiConfig"; //接口
import axios from "@/axios"; //请求
export default {
    data(){
        return{
            startTime:'',
            endTime:'',
            chart:null,
            data: [
                { name: "第1月", value: 11, title: "上学期活动数" },
                { name: "第2月", value: 14, title: "上学期活动数" },
                { name: "第3月", value: 41, title: "上学期活动数" },
                { name: "第4月", value: 2, title: "上学期活动数" },
                { name: "第5月", value: 0, title: "上学期活动数" },

                { name: "第1月", value: 2, title: "本学期活动数" },
                { name: "第2月", value: 6, title: "本学期活动数" },
                { name: "第3月", value: 43, title: "本学期活动数" },
                { name: "第4月", value: 17, title: "本学期活动数" },
                { name: "第5月", value: 2, title: "本学期活动数" },

            
            ]
        }
    },
    methods:{
        createChart() {
            const chart = new Chart({
                container: "shijianFenbu",
                autoFit: true,
                height: 240
            });

            chart.data(this.data);
            chart.scale("name", {
                type: "cat"
            });
            chart.scale("value", {
                nice: true
            });
            chart.axis('name',{
                label:{
                    style:{
                        fill:'#fff',
                        fontSize:14
                    }
                }
            })
            chart.axis('value',{
                label:{
                    style:{
                        fill:'#fff'
                    }
                }
            })
            chart.legend({
                itemName:{
                    style:{
                        fill:'#fff',
                        fontSize:16,
                        lineHeight:18
                    }
                },
                marker:{
                    style:{
                        r:8
                    }
                }
            })
            chart.tooltip({
                showCrosshairs: true,
                shared: true
            });
                
            chart
                .area()
                .position("name*value")
                .shape("smooth")
                .color("title",['#FF5DE4','#00FFEE'])
            chart
                .line()
                .shape("smooth")
                .position("name*value")
                .color("title",['#FF5DE4','#00FFEE'])

            chart
                .point()
                .position("name*value")
                .color("title",['#FF5DE4','#00FFEE'])
                
                .shape("circle");

            chart.interaction("element-highlight");

            chart.render();
        },
        getInOutPeopleCount(){
            let url = '?startTime='+this.startTime+'&endTime='+this.endTime
            axios.get($api.api+'/smart-uttc/captureLog/white/inOutPeopleCount'+url).then(res => {
                this.createChart();
                if (res) {
            
                }
            });
        }
    },
    mounted(){
        this.startTime = '1595440294000';
        this.endTime = '1595469094000';
        this.getInOutPeopleCount()
    }
}
</script>

<style lang="scss" scoped>
.shijianFenbu-box{

}
</style>